﻿<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>系统应用监视</title>
    <link href="/InSiteWebApplication/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/custom-easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/icon.css" rel="stylesheet" />
</head>
<body>
    <!--<div class="panelSection">    
        <div class="easyui-panel " title="执行次数最多的100条SQL" style="padding:3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
            <table id="Table1" style="height:240px" data-options="rownumbers:true"></table>
        </div> 
    </div>

    <div class="panelSection">    
        <div class="easyui-panel " title="执行时间最久的100条SQL" style="padding:3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
            <table id="Table2" style="height:240px" data-options="rownumbers:true"></table>
        </div>
      </div>
    <div class="panelSection" >
        <div class="easyui-panel " title="全表查询定位SQL" style="padding:3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
           <table id="Table3" style="height:240px" data-options="rownumbers:true"></table>
        </div>
	  </div>-->

     <div class="panelSection">    
        <div class="easyui-panel " title="表空间使用情况" style="padding:3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
           <div style="width:600px;float:left"><table id="Table4" style="height:340px" data-options="rownumbers:true"></table></div> 
            <table id="Table5" style="height:340px" data-options="rownumbers:true" style="width:600px;float:left"></table>
        </div>
    </div>

    <div class="panelSection">    
        <div class="easyui-panel " title="服务器使用情况" style="padding:3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
           <div id="main" style="width: 500px;height:340px;float:left;"></div>
           <div id="main1" style="width: 500px;height:340px;float:left;"></div>
           <div id="main2" style="width: 500px;height:340px;float:left;display:none"></div>
           <div id="main3" style="width: 500px;height:340px;float:left;display:none"></div>
           <div id="main4" style="width: 500px;height:340px;float:left;display:none"></div>
           <div id="main5" style="width: 500px;height:340px;float:left;display:none"></div>
           <div id="main6" style="width: 500px;height:340px;float:left;display:none"></div>
           <div id="main7" style="width: 500px;height:340px;float:left;display:none"></div>
        </div>
    </div>
    
  <!--<div id="dd"><input id="tb" type="text" class="easyui-textbox" data-options="multiline:true"  style="width:580px;height:450px"/></div>-->
</body>
</html>
<script src="/InSiteWebApplication/Scripts/json2.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/array.pollyfill.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/CustomCommon.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/echarts.min.js" type="text/javascript"></script>
<script>
    //创建人：longb
    //日期：2023-07-28
    //描述：系统应用监视
    var page = {
        rootPath: getRootPath(), //网站根路径
        ajaxUrl: getRootPath() + "/Ashx/ZsHandler/ZSDeviceMonitorHandler.ashx",
        init: function () {
            page.bind();
            page.initPageData();
            page.InitCharData();

            setInterval('page.InitCharData()', 10000);
        },
        initPageData: function () {
//            page.post({ action: 'GetTop100SQL' }, false, function (res) {
//                $('#Table1').datagrid('loadData', res.DBTable);
//            });
//            page.post({ action: 'getTop100SlowSQL' }, false, function (res) {
//                $('#Table2').datagrid('loadData', res.DBTable);
//            });
//            page.post({ action: 'GetTableAccessFullSQL' }, false, function (res) {
//                $('#Table3').datagrid('loadData', res.DBTable);
//            });
            page.post({ action: 'GetTableUseSQL' }, false, function (res) {
                $('#Table4').datagrid('loadData', res.DBTable);
            });
            page.post({ action: 'GetTableSpaceSQL', tabname: '' }, false, function (res) {
                $('#Table5').datagrid('loadData', res.DBTable);
            });

        },
        InitCharData: function () {
            page.post({ action: 'GetWebServerData' }, false, function (res) {
                var cpu = res.ReturnData.cpu;
                var sys = res.ReturnData.sys;
                var disk = res.ReturnData.disk;
                page.initChart('main', '内存使用率', [{ name: cpu.UsedRam + "/" + cpu.TotalRAM, value: cpu.RAMRate}]);
                page.initChart('main1', 'CPU使用率', [{ name: sys.cpuNum + '核', value: cpu.CPURate}]);
                $.each(disk, function (index, item) {
                    $('#main' + (index + 2)).css('display', 'block');
                    page.initChart('main' + (index + 2), item.DiskName, [{ name: item.Used + '/' + item.TotalSize, value: item.AvailablePercent}]);
                });
            });
        },
        //页面事件绑定
        bind: function () {
            $('#Table1').datagrid({
                singleSelect: true,
                columns: [[
                 { field: 'USERNAME', title: '用户名', width: 120 },
                 { field: 'EXECUTIONS', title: '执行次数', width: 150 },
                 { field: 'SQL_TEXT', title: 'SQL文本', width: 1000 }
                ]],
                onClickCell: function (index, field, value) { page.ShowDialg(value); }
            });
            $('#Table2').datagrid({
                singleSelect: true,
                columns: [[
                 { field: 'USERNAME', title: '用户名', width: 120 },
                 { field: 'EXECUTIONS', title: '执行次数', width: 90 },
                 { field: 'TOTALTIME', title: '总执行时间', width: 90 },
                 { field: 'AVGTIME', title: '平均执行时间', width: 90 },
                 { field: 'SQL_TEXT', title: 'SQL文本', width: 1000 }
                ]],
                onClickCell: function (index, field, value) { page.ShowDialg(value); }
            });
            $('#Table3').datagrid({
                singleSelect: true,
                columns: [[
                 { field: 'OBJECT_NAME', title: '表名', width: 120 },
                 { field: 'CPU_COST', title: 'CPU消耗', width: 90 },
                 { field: 'IO_COST', title: 'IO消耗', width: 90 },
                 { field: 'TEMP_SPACE', title: 'TEMP表空间消耗', width: 90 },
                 { field: 'SQL_TEXT', title: 'SQL文本', width: 1000 }
                ]],
                onClickCell: function (index, field, value) { page.ShowDialg(value); }
            });
            $('#Table4').datagrid({
                singleSelect: true,
                columns: [[
                 { field: 'TBS', title: '表空间名', width: 120 },
                 { field: 'TOTALM', title: '总共大小M', width: 70 },
                 { field: 'USEDM', title: '已使用空间M', width: 90 },
                 { field: 'REMAINEDM', title: '剩余空间M', width: 90 },
                 { field: 'USEDMB', title: '已使用百分比', width: 90 },
                 { field: 'REMAINEDMB', title: '剩余百分比', width: 90 }
                ]]
            });
            $('#Table5').datagrid({
                singleSelect: true,
                columns: [[
                 { field: 'TABLESPACE_NAME', title: '表空间名', width: 100 },
                 { field: 'TOTALM', title: '文件大小', width: 70 },
                 { field: 'USER_BYTES', title: '文件可用大小', width: 80 },
                 { field: 'FILE_NAME', title: '数据库文件存放地', width: 500 }
                ]]
            });
        },
        initChart: function (id, name, data) {
            var myChart = echarts.init(document.getElementById(id));
            myChart.setOption({
                legend: {
                    orient: 'horizontal',
                    left: 'center',
                    top: 'bottom'
                },
                series: [
                    {
                        name: name,
                        type: 'gauge',    // 设置图表类型为饼图
                        progress: {
                            show: true,
                            width: 18
                        },
                        data: data
                    }
            ]
            });

        },
        ShowDialg: function (value) {
            $('#tb').textbox('setText', value);
            $('#dd').dialog({
                title: 'SQL查看',
                width: 600,
                height: 500,
                closed: false,
                cache: false,
                modal: true
            });
        },
        //post数据
        post: function (param, async, callback) {
            $.ajax({
                type: "Post",
                url: page.ajaxUrl,
                data: param,
                cashe: false,
                async: async,
                dataType: "json",
                beforeSend: function () {
                    $.messager.progress({ text: '', msg: '处理中...' });
                },
                success: function (data) {
                    $.messager.progress('close');
                    callback(data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.messager.progress('close');
                    displayMessage(XMLHttpRequest.responseText, false);
                }
            });
        }
    }
    $(function () {
        page.init();
    });
</script>
